@charset "UTF-8";
/*
 * Copyright Thoughtworks, Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
// new theme for old pages in go.cd app
@use "sass:color";
@import "../new_stylesheets/shared/go-variables";
@import "../new_stylesheets/shared/mixins";
@import "../new_stylesheets/shared/common";
@import "../new_stylesheets/shared/alert";
@import "normalize-scss/sass/normalize";
@include foundation-grid;
@include foundation-forms;

%page-title {
  color: #333 !important;
  margin-top: 4px;
  font-size: 18px !important;
  font-weight: 600 !important;
}

body {
  padding: 0;
  margin: 0;
  font-family: "Open Sans", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
  font-weight: normal;
  color: #0a0a0a;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: $page-body-background;
}

ul {
  margin: 0;
}

.row {
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;

  @include clearfix;

}

.column,
.columns {
  box-sizing: border-box;
}

.container {
  padding-left: 0.9375rem;
  padding-right: 0.9375rem;
  margin: 0;
  overflow: visible;

  @include clearfix;
}

a,
a:hover,
a:visited {
  color: $go-links;
}

*,
html,
body {
  font-family: "Open Sans", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
}

h1,
h2,
h3,
h4 {
  font-family: "Open Sans", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
  font-weight: 500;
}

h4 {
  font-size: 18px;
}

.yui-t7 #yui-main .yui-b {
  background: transparent;
}

#header {
  background: $header-bg;
  padding: 0 30px;
  height: $main-nav-height;
  box-sizing: border-box;

  .header {
    background: $header-bg;
    padding: 0;
  }
}

// environments

.environment .pipeline .deploy {
  margin-top: 10px;
}

// pipelines

#pipelines #body_content {
  background-color: transparent;
}

.content_wrapper_inner {
  padding: 15px 30px;
  margin: 0;
}

#pipelines {
  h2.entity_title {
    font-weight: 600;
    margin: 10px 0 0;

    a {
      font-weight: 600;
    }
  }

  .pipelines_selector {
    width: 370px;
    position: relative;
    margin-top: 3px;
  }
}

#body_content {
  position: relative;
  padding: 50px 0 0 0;
  background: transparent;
}

.page_header {
  background: $page-header-bg;
  background-size: cover;
  position: fixed;
  z-index: $page-header;
  top: 40px;
  box-shadow: 0 0 0 #000;
  border: 0;
  height: 50px !important;
  box-sizing: border-box;
  padding: 7px 30px;
  box-shadow: 0 0 10px rgb(0, 0, 0, 21%);

  h1 {
    display: inline-block;
  }
}

h1.entity_title {
  color: $page-header-title !important;
  margin-top: 7px;
  font-size: 17px !important;
  font-weight: 600 !important;
}

.pipeline {
  h3.title.entity_title {
    font-weight: 600;
  }
}

.stage_bar.Passed {
  background-image: none;
  background-color: $passed;
}

.pipeline .stages .last_run_stage {
  border-bottom: 6px solid #ccc;
}

.selector_header {
  margin: 0 10px 10px 10px;
  padding-bottom: 5px;
  border-bottom: 1px dotted $border-color;
}

.selector_group input {
  margin-top: 1px;
}

.selector_pipeline input {
  margin-top: 8px;
  float: left;
}

// pipeline history

.container-in-body {
  padding: 0 !important;
}

#bd .yui-b {
  padding-top: 50px !important;
}

#bd {
  border: 0;
  margin: 0;
  padding-top: 0;
  min-width: auto !important;
  background: none;
}

#body_content .stage_detail_setting,
.job_details .job_detail_setting {
  margin: 10px 0 0 15px;
}

.job_details {
  font-size: rem-calc(18px);
}

.pipeline_history,
.yui-b .Job,
.yui-b .Server {
  overflow: hidden;
  position: fixed;
  top: 40px;
  height: auto;
  background: #fff;
  box-shadow: none;
  border: 0;
  padding: 10px 30px;

  h2.entity_title {
    color: #333 !important;
    font-weight: 400 !important;
    font-size: 18px !important;
  }
}

.pipeline-instance-header {
  font-size: 12px;
}

// stage history

.two_col .rail {
  box-shadow: none;
  border-radius: 3px;
  padding: 0;
  border: 0;
}

.stage_history {
  h3 {
    padding: 11px 10px;
    background: $stage-history-head-bg;
    margin-bottom: 0;
    font-weight: 600;
    border: 1px solid $stage-history-head-bg;
    border-radius: $global-border-radius $global-border-radius 0 0;
  }

  .stage {
    border: 1px dotted #ccc;
    border-width: 1px 1px 0 1px;
  }

  div.stage a.selected,
  .stage_history div.stage a.selected:hover {
    box-shadow: none;
    border-radius: 0;
  }

  .stage > a {
    background: linear-gradient(to bottom, #fff 0%, #fff 100%);
    font-weight: 600;
    border-radius: 0;

    &:hover {
      background: linear-gradient(to bottom, #fff 0%, #fff 100%);
    }
  }

  .config_change {
    padding: 8px 10px;
    border: 1px dotted #ccc;
    border-width: 1px 1px 0 1px;
  }

  .pagination {
    font-size: rem-calc(13px);
    margin: 0;
    padding: 10px;
    background: $stage-history-pagination-bg;
    border-radius: 0 0 $global-border-radius $global-border-radius;
    border: 1px solid $stage-history-pagination-bg;

    a {
      font-weight: 600;
    }
  }

  .compare_pipeline {
    bottom: 10px;
  }
}

// job history

.sidebar_history #build_history_holder {
  border: 0;
}

.build_detail .sidebar_history h4.entity_title {
  padding: 12px 10px !important;
  background: $stage-history-head-bg;
  margin-bottom: 0 !important;
  font-weight: 600;
  border: 1px solid $stage-history-head-bg;
  border-radius: $global-border-radius $global-border-radius 0 0;
}

#build_detail_summary_container {
  background: #fff;
  padding: 10px 0;
}

.material_revision {
  font-size: 14px;
  padding: 20px;
}

// css arrows

$arrow-border-color: color.adjust(#000, $lightness: 75%);
$arrow-border-active-color: color.adjust(#000, $lightness: 50%);

.arrow {
  display: inline-block;
  width: 10px;
  height: 10px;
  background: transparent;
  text-decoration: none;
  color: transparent;

  &::before {
    display: block;
    content: "";
    width: 10px;
    height: 10px;
    border: {
      top:  2px solid $arrow-border-color;
      left: 2px solid $arrow-border-color;
    }
  }

  &.prev {
    transform: rotate(-45deg);
    left: 0;
  }

  &.next {
    transform: rotate(135deg);
    right: 0;
  }
}

#pipeline_header .feed {
  margin-top: 6px;
}

.stages {
  .pipeline_flow {
    padding-bottom: 0;

    .pipeline {
      border: 1px solid $border-color;
      border-bottom: 0;
      border-radius: $global-border-radius $global-border-radius 0 0;
      overflow: hidden;

      .stages {
        background: #fff;
        padding: 10px 30px;
        border-radius: 3px 3px 0 0;
        box-sizing: border-box;
      }
    }
  }

  .page_title_bar {
    background: #fff;
    padding: 10px 30px;
    border: 1px solid $border-color;
    border-top: 0;
    border-radius: 0 0 $global-border-radius $global-border-radius;
    overflow: hidden;
  }
}

// tab style

.sub_tab_container {
  .sub_tabs_container {
    margin-bottom: 0;
    background: none !important;
  }
}

.sub_tabs_container li.current_tab a,
.sub_tabs_container li.current_tab a:hover,
.sub_tabs_container li.current a,
.sub_tabs_container li.current a:hover {
  background: $current-tab-bg;
  font-size: rem-calc(13px);
  font-weight: 600;
  box-shadow: 0 -1px 2px 1px rgb(0, 0, 0, 10%);
}

.sub_tabs_container li.current a {
  background: $current-tab-bg;
  font-size: rem-calc(13px);
  font-weight: 600;
  box-shadow: 0 -1px 2px 1px rgb(0, 0, 0, 10%);

  &:hover {
    background: $current-tab-bg;
  }
}

.sub_tabs_container {
  background: none;
  padding: 0;
  margin: 0;

  .clear {
    display: none;
  }

  ul {
    float: none;
    overflow: hidden;
    padding: 10px 20px 0;
    background: $tab-header-bg;
    border-radius: $global-border-radius $global-border-radius 0 0;

    li {
      position: relative;

      a {
        background: $tab-bg;
        padding: 7px 15px;
        line-height: 19px;
        font-size: 13px;
        border-radius: 3px 3px 0 0;
        font-weight: 600;
        color: #333;
      }

      a:hover {
        background: $tab-header-bg-hover;
        color: #333;
      }

      &.current {
        a {
          background: $current-tab-bg;
        }

        &:hover {
          background: transparent;
        }
      }
    }
  }

  &.general,
  &.materials,
  &.stages,
  &.environment_variables,
  &.parameters {
    margin-bottom: 20px;
  }
}

div#tab_container {
  overflow: hidden;
  background: #fff;
  border-radius: 0 0 3px 3px;
  padding: 20px;
}

.list_table,
.simple,
.filters {
  box-shadow: none;
  border: none;
  font-size: rem-calc(13px);
  border-bottom: 2px solid #ccc;
  background: transparent;
  margin: 0;

  thead {
    border: 0;

    tr {
      background: $table-header-bg;
      color: $txt-color;
      font-size: rem-calc(14px);
      border-left: 1px solid $table-header-bg;
      border-right: 1px solid $table-header-bg;
    }
  }

  tr.agent_header {
    border-bottom: 3px solid $table-header-border;
  }

  th {
    background-color: $table-header-bg !important;
    background-image: none !important;
    border-bottom: 1px solid #ddd;
    white-space: nowrap;
    font-size: rem-calc(13px) !important;
    padding: 10px !important;
    font-weight: 600;
  }

  tbody {
    background: #fff;

    tr {
      border-right: 1px dotted #ddd;
      border-left: 1px dotted #ddd;
      font-size: rem-calc(13px);

      &:nth-child(even) {
        background-color: #f1f1f1;
      }
    }
  }

  tr.user_header {
    border: 0;
    border-bottom: 3px solid $table-header-border;
  }
}

.notification .filters {
  min-height: auto;
}

.general li#general a,
.materials li#materials a,
.stages li#stages a,
.environment_variables li#environment_variables a,
.parameters li#parameters a,
.permissions li#permissions a,
.stage li#stage a,
.jobs li#jobs a,
.settings li#settings a,
.tasks li#tasks a,
.artifacts li#artifacts a {
  color: #333;
  background: $current-tab-bg;
  position: relative;
  font-weight: 600;
  box-shadow: 0 -1px 2px 1px rgb(0, 0, 0, 10%);
}

#group_edit_form .form_buttons .submit,
#pipeline_snippet_view #view_group .form_buttons .link_as_button,
#pipeline_snippet_edit #edit_group .form_buttons .link_as_button,
button.submit {
  font-size: rem-calc(13px);
  font-weight: 600;
  border: 0;
  min-width: inherit;
  transition: background-color 0.25s ease-out, color 0.25s ease-out;

  &:hover {
    background: #666;
    color: #fff !important;
    transition: background-color 0.25s ease-out, color 0.25s ease-out;
  }
}

#agents_form {
  margin-top: 3px;
}

.enhanced_dropdown {
  border-bottom-color: #ccc;
  border-right-color: #ccc;
  margin-top: -37px;

  @extend %boxshadow;

  li:hover {
    background-color: #efefef;
  }

  a.lookup_icon {
    background-position: calc(100% - 10px) center;
  }
}

.page_header a.new_agents_page {
  font-size: 13px;
  color: #fff;
  text-decoration: none;
  margin: 6px 0 0 10px;
  display: inline-block;
  font-weight: normal;
  background: #333;
  border-radius: 3px;
  padding: 3px 5px;

  &:hover {
    text-decoration: none;
  }
}

.pipeline_operations {
  button.submit {
    line-height: normal;
    height: 22px;
    padding: 0 !important;
    border-radius: $global-border-radius;
    box-shadow: none;
    border: 0;

    &:hover {
      border-radius: $global-border-radius;
    }
  }
}

.enhanced_dropdown .add_panel {
  background: none;
  overflow: hidden;
}

.icon16.setting {
  margin-right: 12px;
  padding: 0;

  &:hover {
    animation-name: rotate;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
  }

  @keyframes rotate {
    from {
      transform: rotate(0deg);
    }

    to {
      transform: rotate(360deg);
    }
  }
}

.sub_tab_container_content {
  background: #fff;
  padding: 0;

  #tab-content-of-configuration-xml & {
    padding: 20px 0;
  }
}

.environment .pipeline .deploy button.submit {
  height: auto;
  padding: 0 !important;
}

.page_header a.new_agents_page::before {
  display: none;
}

.form_heading {
  position: relative;

  #edit_config {
    margin-top: -21px;
    right: 0 !important;
    background-color: $go-primary;
    color: $go-white !important;
    min-width: 60px;
  }
}

#config_editor_form .buttons-group {
  padding: 10px;
  clear: both;
  position: relative;
}

.form_buttons {
  background: none;
}

.fieldset {
  clear: none;
  box-shadow: none;
  border-radius: 0;
  border: 0;
  background: none;
  margin: 0 0 20px 0;
}

// forms

input[type="text"],
input[type="password"],
input[type="file"],
input[type="url"],
textarea {
  font-size: rem-calc(13px);
  line-height: 37px;
  border-radius: 3px;
  padding: 0 10px;
  box-shadow: none;
  margin-bottom: 10px;
}

textarea {
  min-height: 100px;
  max-height: 200px;
  min-width: 250px;
  line-height: normal !important;
}

button.primary,
a.primary_link_as_button,
.link_as_button.primary {
  background-color: $go-primary !important;
  font-size: rem-calc(13px) !important;
  font-weight: 700;
  border: 1px solid $go-primary;

  &:hover {
    background-color: color.adjust($go-primary, $lightness: -4%) !important;
    background-image: none;
    font-size: rem-calc(13px);
  }

  &:focus,
  &:active {
    outline: 0;
  }

  span {
    font-size: rem-calc(13px) !important;
  }
}

button.submit.primary span {
  font-size: rem-calc(13px);
  color: #fff;
}

button.submit,
a.link_as_button {
  span {
    color: $btn-txt;
    font-weight: bold;
    font-size: rem-calc(13px);
  }

  &:hover {
    background: #666;

    span {
      color: $btn-txt;
    }
  }
}

.form_buttons button.submit {
  min-width: 75px;
}

input:focus,
textarea:focus {
  background-color: rgb(182, 111, 194, 14%);
  box-shadow: inset 0 0 3px #b66fc2;
  box-shadow: none;
}

.list_aggregation li {
  color: #333;
}

input[type="submit"],
input[type="submit"]:hover,
button.submit,
button.submit:hover,
button.submit_hover,
a.link_as_button,
a.link_as_button:hover,
a.link_as_button_hover,
button.submit.disabled,
button.submit.disabled:hover,
button.submit.disabled_hover,
input.submit,
input.submit:hover,
input.submit_hover,
input.submit.disabled,
input.submit.disabled:hover,
input.submit.disabled_hover,
a.link_as_button.disabled,
a.link_as_button.disabled:hover {
  background: $btn-bg;
  box-shadow: none !important;
  font-size: rem-calc(13px) !important;
  color: $btn-txt !important;
  padding: 6px 10px;
  text-transform: uppercase;
  border-radius: $global-border-radius;

  &:hover {
    background: $btn-bg-hover;
    color: $btn-txt !important;

    span {
      color: $btn-txt !important;
      font-size: rem-calc(13px) !important;
    }
  }
}

.Passed {
  background-image: none;
  background-color: $passed;

  a {
    @include icon-after($passed-icon, $margin: 0);
  }
}

.Failed {
  background-image: none;
  background-color: $failed;

  a {
    @include icon-after($failed-icon, $margin: 0);
  }
}

.Cancelled {
  a {
    @include icon-after($cancelled-icon, $margin: 0);
  }
}

.Passed,
.Failed,
.Cancelled {
  a {
    text-align: center;
    text-indent: 0;
    color: white;
    line-height: 0;
    font-size: 12px;

    span {
      display: none;
    }
  }
}

.Cancelled {
  a {
    color: black;
  }
}

.color_code,
.color_code_small {
  &.Passed,
  &.Failed,
  &.Cancelled {
    height: 14px;
    width: 14px;
    background-color: inherit;
    font-size: 14px;
  }

  &.Passed {
    color: $passed;

    @include icon-before($passed-icon, $margin: 0);
  }

  &.Failed {
    color: $failed;

    @include icon-before($failed-icon, $margin: 0);
  }

  &.Cancelled {
    color: $building;

    @include icon-before($cancelled-icon, $margin: 0);
  }
}

.color_code_stage,
a.stage_bar,
div.stage_bar {
  &.Passed,
  &.Failed,
  &.Cancelled {
    text-align: center;
  }

  &.Passed {
    color: white;

    @include icon-after($passed-icon, $margin: 0, $line-height: 1.1em);
  }

  &.Failed {
    color: white;

    @include icon-after($failed-icon, $margin: 0, $line-height: 1.1em);
  }

  &.Cancelled {
    background-image: none;
    background-color: $building;
    position: relative;
    color: $icon-txt;

    &::after {
      content: "";
      background-image: image_url("building.png");
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      background-size: 40px 16px;
      right: 0;
    }

    @include icon-after($cancelled-icon, $margin: 0, $line-height: 1.1em);
  }
}

li.Cancelled,
.cancelled-stage {
  background-image: none;
  background-color: $building;
  position: relative;

  &::after {
    content: "";
    background-image: image_url("building.png");
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    background-size: 40px 16px;
    right: 0;
  }
}

tr.Cancelled,
tr.cancelled-stage {
  &after {
    background-image: none;
  }
}

.Building,
.Active {
  background-color: $building;
  background-image: none;
}

.vsm-entity.pipeline .stages li {
  &.Building,
  &.building-stage {
    background-color: $building;
  }
}

.job_details_content .sub_tabs_container {
  margin-bottom: 0;
  position: relative;
  float: left;
  width: calc(100% - 272px);
}

a:link#link-to-this-page,
a:visited#link-to-this-page {
  position: absolute;
  right: 10px;
  top: 10px;
  color: #333;
}

.sub_tab_container_content .ansi-color-toggle {
  margin-top: 0 !important;
}

#tab-content-of-tests,
#tab-content-of-artifacts,
#tab-content-of-console {
  font-size: 14px;
}

#build-status-panel .sub_tab_container_content {
  padding: 20px;
}

#tab-content-of-materials {

}

.sidebar_history {
  height: 43px;

  #build_history_holder {
    padding: 0 0 0 !important;
    border-radius: 3px 3px 0 0;

    .entity_title {
      cursor: pointer;
      user-select: none;

      @include icon-after(caret-down,
      $size: 20px,
      $margin: 0,
      $line-height: 0.85em
    );

      &::after {
        float: right;
        padding-right: 2px;
      }
    }

    &.open #buildlist-container {
      position: absolute;
      z-index: 101;
      top: 43px;
      bottom: 0;
      overflow: auto;
      width: 257px;

      .dropdown-menu {
        background-color: #f5f5f5;
        padding: 0;
        position: static;
        border-radius: 0;
      }
    }
  }
}

.sidebar_history .passed .color_code_small {
  background-image: none !important;
}

#buildlist-container .buildlist li.current a,
#buildlist-container .buildlist li.current a:hover {
  box-shadow: none !important;
  background: #fff !important;
}

#buildlist-container .buildlist li a {
  word-break: break-all;
  overflow-wrap: break-word;
  background: linear-gradient(to bottom, #f5f5f5 0%, #f5f5f5 100%) !important;
}

#tab-content-of-source-xml {
  .heading h2 {
    display: inline;
    font-weight: 300;
    font-size: 24px;
  }
}

.wizard h1,
.wizard h1 strong,
#tab-content-of-source-xml h1,
#tab-content-of-source-xml h1 span {
  margin: 20px 30px 30px;
}

#yui-main .content_wrapper_outer,
#yui-main .content_wrapper_inner {
  padding: 0;
  background: transparent;
}

form#notification_form fieldset {
  border-radius: 3px 3px 0 0;
  border: 0;
  padding: 30px 20px;
  margin-bottom: 0;
  box-sizing: border-box;
}

.notification caption,
.notification legend {
  font-size: 13px;
}

#pipelines .pipelines_selector .enhanced_dropdown .selector_group {
  border: 0;
}

#admin-holder-for-admin-config-source-xml .buttons-group #cancel_edit {
  margin-right: 0;
  right: 0;
  min-width: 75px;
  background: #ccc;
  color: #333 !important;

  &:hover {
    background: #666;
    color: #fff !important;
  }
}

#admin-holder-for-admin-config-source-xml .buttons-group #save_config {
  right: 100px;
  background: $go-primary;
  color: $go-white !important;
  height: 27px;
  min-width: 75px;

  &:hover {
    color: color.adjust($go-primary, $lightness: -4%);
  }
}

a:link.help,
a:visited.help {
  margin-top: 9px;
  color: #fff;
}

#pipelines .content_wrapper_inner {
  border: 0;
}

#pipelines #body_content .content_wrapper_inner {
  padding: 20px 0;
}

.environments {
  .icon16.setting {
    float: none;
    margin-left: 10px;
  }

  margin-top: 5px;
}

.flash {
  position: absolute;
  width: 100%;

  .messaging_wrapper & {
    position: static;
  }
}

.fieldset .form_item {
  border-bottom: 0;
}

#admin-holder-for-admin-config-source-xml .buttons-group > * {
  margin-left: 2px;
}

.variable,
.secure_variables {
  label {
    text-transform: uppercase;
    position: relative;
    top: 5px;
    font-weight: 600;
  }

  .content_wrapper_inner {
    > span {
      display: block;
      margin-bottom: 20px;
    }
  }
}

.form_buttons {
  button.submit,
  button[type="reset"].submit {
    background: $btn-light-bg !important;
    color: #333 !important;
    border-color: $border-color;

    span {
      color: #333 !important;
    }

    &:hover {
      background: $btn-light-bg-hover !important;

      span {
        color: #fff !important;
      }
    }
  }

  button.submit.primary {
    background: $go-primary !important;
    color: #fff !important;
    border-color: $go-primary;

    span {
      color: #fff !important;
    }

    &:hover {
      background: $go-primary !important;
    }
  }

  button.submit.primary[disabled] {
    background: $btn-light-bg !important;
    border: 1px solid $btn-light-bg !important;
  }
}

#stages .build_cause .modified_files div {
  padding: 2px 5px 5px 20px;
}

#pipeline_status_bar .pipeline .stages .selected .stage_bar_wrapper {
  background-repeat: repeat-x;
}

.vsm-entity.pipeline ul.instances {
  height: 61px;

  .instance {
    margin-top: 0;
  }

  ul.stages {
    margin-top: 10px;
  }

  .duration {
    font-size: 11px;
  }

  .message {
    padding: 0 7px;
  }
}

// plugins

ul.plugins .plugin {
  padding: 20px;
  border-top: 0;
  border-bottom: 1px dotted #ccc;
  position: relative;

  .plugin-details {
    margin-bottom: 10px;
  }

  .plugin-logo {
    background-color: transparent;
  }

  .description {
    font-size: 14px;
  }

  .key {
    color: #6b6b6b;
    font-weight: 500;
    margin-right: 10px;
  }

  .more-info-detail {
    font-size: 13px;
  }

  .plugin-messages li {
    font-size: 12px;
    line-height: 18px;
  }
}

.Failing {
  position: relative;
}

.Building,
.building-stage {
  position: relative;
  background: $building image_url("building.gif") repeat-x;
}

.stage_bar.Building {
  background: $building image_url("building.gif") repeat-x;
}

@keyframes move {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: 50px 50px;
  }
}

.stage_history {
  .Building {
    > span {
      height: 12px;
    }
  }
}

.building-stage {
  span {
    height: 12px;
  }
}

.Building,
.Cancelled,
.Failing {
  a {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    z-index: 1;
    bottom: 0;
  }
}

#filter_help {
  margin-top: 0;
}

table.variables th {
  font-size: 14px;
  padding-bottom: 5px;
}

.back_to_top {
  border-radius: 50%;
}

.overview_widget .job .elapsed_time {
  white-space: normal;
}

.ansi-color-toggle {
  margin-top: 0 !important;
}

#buildlist-container .buildlist li {
  a {
    position: relative;
    padding: 10px 10px 10px 30px !important;
  }

  .color_code_small {
    position: absolute;
    left: 10px;
    top: 15px;
  }
}

.build_detail .sidebar_history .time_ago {
  margin-left: 0 !important;
}

#content_area textarea {
  width: 100%;
  max-height: 620px;
}

pre,
code,
#admin-holder-for-admin-config-source-xml textarea {
  overflow-x: auto !important;
}

.add-filter p.mycheckin {
  padding-top: 25px !important;
}

.buildoutput_pre {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 10px 40px 10px;
  min-height: calc(100vh - 480px);
}

.old-agent-button-group {
  li {
    position: static;

    .button {
      border-radius: 0;
    }
  }
}

.pagination {
  border: 0;
  margin: 0 30px;

  .pages {
    border-radius: 3px;
  }
}

.wizard .aside {
  padding: 0 0 0 20px;
}

.wizard .section {
  box-sizing: border-box;
  padding: 20px;
}

.admin-rounded-container,
#yui-main .content_wrapper_inner {
  padding: 15px 0;
}

.content_wrapper_inner {
  .admin-rounded-container {
    padding: 0;
  }
}

#build-status-panel {
  padding: 0 30px;
}

.job_details_content .build_detail_container {
  margin-right: 0 !important;
  clear: left;

  #tab-content-of-materials .material_revision {
    padding: 20px !important;
    margin-bottom: 0;
  }
}

.overview_widget {
  h3 {
    font-size: rem-calc(14px);
    margin-bottom: 20px;
    padding: 13px 10px;
  }
}

.overview_widget {
  .job_grouping {
    margin: 0 20px 0 0;
    border-bottom: 1px dotted $border-color;
    padding: 6px 0;

    .color_code_small {
      &.Active,
      &.Cancelled {
        margin-top: 0;
      }
    }
  }
}

.hidereveal_expander {
  font-size: rem-calc(13px);
}

.content #tab_container div.jobs {
  width: 225px;

  .wrapped_word {
    font-size: 13px;
  }
}

.content #tab_container .materials_overview_wrapper {
  margin-left: 240px;
}

.warnings,
.information {
  margin: 10px 0;
}

.admin-tab-contents {
  padding: 0 30px;

  h1 {
    font-weight: 600;
    margin: 20px 0 40px 0;
    border-bottom: 1px solid $border-color;
    font-size: 20px;
    padding-bottom: 10px;
  }

  h2.entity_title {
    color: $txt-color;
    font-size: rem-calc(17px);
    line-height: 20px;
    font-weight: 600;
    border-bottom: 0;
    padding: 0 0 0 37px;
    background-size: 40px 40px;
    background-position: -8px -10px;
  }

  .heading {
    padding-bottom: 10px;
    margin-bottom: 20px;

    span {
      margin-top: 12px;
    }
  }

  .fieldset {
    padding: 20px 0;
  }

  .fieldset .form_item {
    border-bottom: 0;
    margin-bottom: 0;
    padding-bottom: 0;
  }

  .roles {
    white-space: nowrap;
  }
}

#tab-content-of-source-xml .heading h2 {
  font-size: 20px;
}

.content_wrapper_outer {
  clear: both;
}

#links {
  margin: 7px 0 0 10px;
  display: inline-block;

  span,
  a {
    margin-left: 10px;
  }
}

body#login-page {
  .page-wrap::before {
    height: 0;
  }
}

.btn-primary {
  display: inline-block;
  padding: 10px;
  border-radius: 3px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  background: #b66fc2 !important;

  &:hover,
  &:visited {
    text-decoration: none;
    color: #fff;
  }
}

.status-report-btn {
  right: 20px;
  position: absolute;
}

.btn-small {
  padding: 4px 9px;
  font-size: 12px;
}

.status-report-btn-small {
  margin-left: 10px;
  position: absolute;
  top: 8px;
}

// page title header styles

ul.entity_title {
  @extend %page-title;

  li {
    background: none;
    margin-right: 0;
    line-height: normal;
    padding-right: 0;

    &::after {
      content: "";
      background: image_url("g9/backgrounds/icon_breadcrumb_arrow.png") no-repeat scroll 0 0 transparent;
      display: inline-block;
      margin: 0 6px;
      width: 10px;
      height: 10px;
    }

    a {
      font-size: rem-calc(15px);
      font-weight: 600 !important;
      line-height: normal;

      &:hover {
        text-decoration: underline;
      }
    }

    &.last {
      &::after {
        display: none;
      }

      h1 {
        margin: 0 10px 0 0 !important;
        color: #666 !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        line-height: normal;
      }
    }
  }
}

.page_header {
  span.page_name {
    float: left;
    height: 50px;
    line-height: 51px;
    padding: 0 20px;
    margin: -8px 10px 0 0;
    display: block;
    font-size: rem-calc(17px);
    font-weight: 600;
    position: relative;

    &::after {
      content: "";
      position: absolute;
      right: 5px;
      top: 11px;
      width: 0;
      height: 30px;
      border-right: 2px solid #ccc;
    }
  }

  ul.entity_title {
    margin-top: 10px;

    li {
      position: relative;

      &.last {
        label {
          font-size: rem-calc(10px) !important;
        }
      }
    }

    .label {
      position: absolute;
      font-size: rem-calc(10px);
      top: -8px;
    }

    .run_no {
      color: #666;
      font-size: 15px;
      font-weight: 600;
    }
  }
}

.entity_status_wrapper {
  .page_header {
    span.page_name {
      height: 50px;
    }
  }
}

// Dashboard

.pipeline_run_label {
  font-size: 12px;
  display: block;
  margin-bottom: 5px;
  font-weight: 600;
  color: #333;

  .vsm-entity & {
    float: left;
    font-size: 11px;
    width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .vsm-entity.current & {
    width: 230px;
  }
}

.vsm_link_wrapper {
  margin-left: 5px;
  font-size: 11px;

  .vsm-entity & {
    font-weight: 600;
    margin-top: 1px;
    float: right;
  }

  a {
    text-decoration: underline;
  }
}

.status.details a {
  text-decoration: underline;
}

.artifact {
  border-bottom: 1px solid $border-color;
  padding: 25px 0 5px;

  .type_label {
    font-weight: bold;
  }
}

#tab-content-of-artifacts .artifact {
  padding: 0 0 5px 25px;
}

.hide {
  display: none;
}

// hack needed for the show template modal on pipelines page. See `show_template_modal_shim.tsx`
.component-modal-container {
  // avoid applying any styles from the "old" css
  // begin reset all styles of all children
  all: revert;

  * {
    all: revert;
  }

  // end reset all styles of all children

  // apply css normalize
  @include normalize;

  // force some reasonable defaults see `body` in `global.scss`
  & {
    font-size: 14px;
    line-height: 1.5;
  }
}
